<template>
  <div class="star" :class="starsize">
    <span :key='index' v-for="(item, index) in scorein" :class="item" class="itemstar"></span>
  </div>
</template>

<script>
const OK = 'OK'
const HALF = 'HALF'
const NO = 'NO'
export default {
  name:'star',
  prop:{
    score: {
      type:Number
    },
    size: {
      type:Number
    }
  },
  computed:{
    scorein: function () {
      let thescore = this.$attrs.score
      let newscore = []
      for(let i = 1; i<= 5; i++ ) {
        thescore > i ? newscore.push( OK ) : (( i - thescore ) >= 0.5 ? newscore.push( NO ) : newscore.push( HALF ))
      }
      return newscore
    },
    starsize: function () {
      let thesize = this.$attrs.size
      return 'star-' + thesize
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '../common/stylus/index.styl'
  .star
    display flex
    align-items center
    justify-content center
    &.star-48
      .itemstar
        width 20px
        height 19px
        margin-right 22px
        &:last-of-type
          margin-right 0px
      .OK
        bgImg('star48_on')
      .HALF
        bgImg('star48_half')
      .NO
        bgImg('star48_off')
    &.star-36
      .itemstar
        width 15px
        height 15px
        margin-right 6px
        &:last-of-type
          margin-right 0px
      .OK
        bgImg('star36_on')
      .HALF
        bgImg('star36_half')
      .NO
        bgImg('star36_off')
    &.star-24
      .itemstar
        width 10px
        height 10px
        margin-right 3px
        &:last-of-type
          margin-right 0px
      .OK
        bgImg('star48_on')
      .HALF
        bgImg('star48_half')
      .NO
        bgImg('star48_off')
</style>


